<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form>
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            style="width: 400px"
            v-model="query.query"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="list()"
            ></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <el-table :data="data" style="width: 100%" border>
        <el-table-column type="index" label="#" width="50px"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="199px">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="200px">
        </el-table-column>
        <el-table-column label="是否付款" width="200px">
          <template slot-scope="{ row: { pay_status } }">
            <el-tag type="danger" v-if="pay_status == 0">未支付</el-tag>
            <el-tag type="success" v-else-if="pay_status == 1">已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="200px">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="200px">
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="small"
              class="el-icon-edit"
              @click="dialogEditVisible = true"
            ></el-button>
            <el-button
              type="success"
              size="small"
              class="el-icon-location"
              @click="
                dialogFormVisible = true;
                openform(row);
              "
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>
    </el-card>

    <!-- 修改对话框 -->
    <el-dialog title="修改地址" :visible.sync="dialogEditVisible">
      <el-form :model="editform">
        <el-form-item label="省市区/县" label-width="80px">
          <div class="block">
            <el-cascader
              size="large"
              :props="{ expandTrigger: 'hover' }"
              v-model="selectedOptions">
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址" label-width="80px">
          <el-input v-model="editform.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogEditVisible = false;edit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 物流进度对话框 -->
    <el-dialog title="物流进度" :visible.sync="dialogFormVisible">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      query: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      regionData,
      selectedOptions: [],
      dialogEditVisible: false,
      dialogFormVisible: false,
      editform: {},
      total: 0,
      data: [],
      activities:[],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.query.pagenum = val;
      this.list();
    },
    async list() {
      const {
        data: {
          data: { goods, total },
          meta,
        },
      } = await this.$http.get("orders", { params: this.query });
      if (meta.status !== 200) return this.$message.error("获取订单列表失败");
      this.data = goods;
      this.total = total;
    },
    async openform(row){
      const { data:{data,meta} } = await this.$http.get(`/kuaidi/1106975712662`);
      if(meta.status !== 200) return this.$message.error('获取物流信息失败')
      console.log(data);
      this.activities=data;
    },
  },
  created() {
    this.list();
  },
};
</script>